<template>
	<!-- 主营业务 -->
	<div id="Business" class="bg3e8">
		<div class="w1200" id="body">
			<home-title :length="length"></home-title>
			<div class="w1200">
				<div class="left">
					<div class="logo">
						<img :src="logo" alt="" srcset="" />
					</div>
					<ul>
						<li
							:class="{bj: currentIndex === index}"
							v-for="(item, index) in business"
							:key="index"
							@click="handler(index)"
						>
							{{ item.text }}
						</li>
					</ul>
				</div>
				<div class="center">
					<img
						@click="gotopage(item.urls, item.Markdowns, item.Picturelist, item.cards)"
						v-show="currentIndex === index"
						:src="item.Picture"
						alt=""
						srcset=""
						v-for="(item, index) in business"
						:key="'Picture' + index"
					/>
				</div>
				<div class="right">
					<div
						class="title"
						v-show="currentIndex === index"
						v-for="(item, index) in business"
						:key="'title' + index"
					>
						融达机电--{{ item.text }}
					</div>
					<div
						class="center"
						v-show="currentIndex === index"
						v-for="(item, index) in business"
						:key="'describe' + index"
						v-html="item.describe"
					></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import HomeTitle from '@/components/HomeTitle'
import {PagesJump} from '@/utils'
export default {
	name: 'HomeBusiness',
	// import引入的组件需要注入到对象中才能使用
	components: {HomeTitle},
	props: {business: []},
	data() {
		// 这里存放数据
		return {
			logo: 'http://public.znrdtech.cn/picture/title.png',
			currentIndex: 0,
			projectList: Array,
			length: 1
		}
	},
	computed: {}, // 计算属性 类似于data概念
	watch: {}, // 监控data中的数据变化
	methods: {
		handler(index) {
			this.currentIndex = index
		},

		gotopage(urls, Markdowns, Picturelist, cards) {
			PagesJump(urls, Markdowns, Picturelist, cards)
		}
	}, // 方法集合
	created() {}, // 生命周期 - 创建完成（可以访问当前this实例）
	mounted() {}, // 生命周期 - 挂载完成（可以访问DOM元素）
	beforeCreate() {}, // 生命周期 - 创建之前
	beforeMount() {}, // 生命周期 - 挂载之前
	beforeUpdate() {}, // 生命周期 - 更新之前
	updated() {}, // 生命周期 - 更新之后
	beforeDestroy() {}, // 生命周期 - 销毁之前
	destroyed() {}, // 生命周期 - 销毁完成
	activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.bj {
	color: white;
	background-color: #f60;
}
#Business {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	#w1200 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#body {
		width: 100%;
		margin: 0 auto;
		padding: 0 0 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		.w1200 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.left {
				width: 225px;
				height: 470px;
				animation: example2 3s ease-out 1s backwards;
				background-color: white;
				.logo {
					width: 225px;
					height: 162px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				ul {
					height: 308px;
					li {
						height: calc(100% / 6);
						line-height: 51px;
						border-bottom: 1px solid rgba(204, 204, 204, 1);
						box-sizing: border-box;
						padding: 0 30px;
					}
				}
			}
			.center {
				width: 596px;
				height: 470px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.right {
				width: 320px;
				height: 470px;
				animation: example1 3s ease-out 1s backwards;
				.title {
					height: 44px;
					line-height: 44px;
					font-size: 22px;
					padding: 0 10px;
					border-left: 10px solid rgba(44, 123, 211, 1);
					box-sizing: border-box;
				}
				.center {
					width: 100%;
					line-height: 35px;
					text-indent: 2em;
					font-size: 15px;
				}
			}
		}
	}
}
</style>
